<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>做一个简单的轮播图</title>
		<style type="text/css">
			#app{
				width: 300px;
				height: 300px;
				background-color: #BEBEBE;
				margin:  0 auto;
				text-align: center;
			}
			img{
				padding-left: 18px;
				padding-top: 10px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h2>图片切换</h2>
			<img src='../images/con1.jpg' id="img">
			<button type="button" id="prev">上一张</button>
			<button type="button" id="next">下一张</button>
		</div>
		<script type="text/javascript">
			window.onload = function(){
				var imags = ['../images/con1.jpg','../images/con2.jpg','../images/con3.jpg','../images/con4.jpg'];
				var img = document.getElementById('img');
				var prev = document.getElementById('prev');
				var next = document.getElementById('next');
				var index = 0 ;
				var time ;
				prev.onclick = function(){
					img.src = imags[index--];
					if(index == -1){
						index = imags.length-1;
					}
					 
				}
				next.onclick = function(){
					img.src = imags[index++];
					if(index ==(imags.length-1)){
						index = 0 ;
					}
					 
				}
				function setTime(){
					time = setInterval(function(){
						img.src = imags[index++];
						if(index == (imags.length-1)){
							index = 0 ;
						}
					},3000);
				}
				setTime();
				img.onmouseover = function(){
					clearInterval(time);
				}
				img.onmouseout = function(){
					setTime();
				}
			}
		</script>
	</body>
</html>
